<template>
	<view class="dynamic-item" :class="{
		'dynamic-item-space': space == 'space',
		'dynamic-item-line': space == 'line'
	}">
		<view class="inner">
			<view class="item-hd fboxRow Ycenter">
				<image class="avatar" :src="innerData.avatar" mode="aspectFill" @tap="goMyDdHome"></image>
				<view class="flex1 fboxCol">
					<view class="fboxRow Ycenter">
						<text class="name font30 lh44" @tap="goMyDdHome">{{ innerData.realName }} </text>
						<view class="state fboxRow Ycenter Xcenter font24" v-if="innerData.dataStatus == 1">好友可见</view>
					</view>
					
					<view class="job font-w300 font26"v-if="innerData.memberPositionName || innerData.memberCompanyName">
					{{ innerData.memberPositionName || '' }}
					<text class="space-line" v-if="innerData.memberCompanyName && innerData.memberPositionName"></text>
					<!-- <view v-if="innerData.memberCompanyName && innerData.memberPositionName" style="margin: 0 10rpx; width: 1rpx;height: 20rpx;background-color: #D0D3DB;"></view> -->
					
					{{ innerData.memberCompanyName || '' }}
					</view>
				</view>
				<!-- <u-icon v-if="!isMine" name="more-dot-fill" color="#6B707C" size="20" @click="moreMenu"></u-icon> -->
				<text v-if="!isMine" class="bwfont bw-dian" @click="moreMenu"></text>
			</view>
			<view class="item-bd">
				<view
					class="con mt20 font30 color-ACB4C7 font-ell6"
					v-html="whiteUrlCon(innerData.dynamicContent)"
					style="white-space: pre-wrap;"
					@click="goPage('dynamicDetails')"
					v-if="innerData.dynamicContent"
				></view>
				<view class="mt20" v-if="innerData.picture">
					<view class="fboxWrap video-inner" v-if="innerData.pictureType == 3" @tap.stop="goPage('dynamicDetails')">
						<!-- {{imgStyle}} -->
						<view class="max-video" @tap.stop="goPage('dynamicDetails')">
							<image
								class="max-pic100 max-video img_bg"
								:src="innerData.coverURL"
								:style="imgStyle"
								mode="aspectFill"
							></image>
								<!-- mode="heightFix" -->
							<view class="icon-play fboxRow Ycenter Xcenter"><u-icon name="play-right-fill" size="40rpx" color="#F7F9FF"></u-icon></view>
						</view>
					</view>
					<view v-else @tap.stop="goPage('dynamicDetails')">
						<image
							v-if="innerData.pictures.length == 1"
							:src="innerData.pictures[0]"
							:style="imgStyle"
							class="max-pic100 img_bg"
							@tap.stop="picPreview(innerData.pictures, 0)"
							mode="aspectFill"
						></image>
						<template v-else>
							<view class="pic-list fboxWrap">
								<view class="pic" v-for="(pic, sub) in innerData.pictures" :key="sub">
									<image class="img img_bg" :src="pic" :key="sub" mode="aspectFill" @tap.stop="picPreview(innerData.pictures, sub)"></image>
								</view>
							</view>
						</template>
					</view>
				</view>
				<template v-if="innerData.dynamicForwardId">
					<view class="dynamicForward fboxRow Ycenter bg-21242C" @click="$pageTo('/dynamicDetails?id=' + innerData.dynamicForwardId)">
						<image class="pic img_bg" :src="innerData.pictureForward" mode="aspectFill"></image>
						<view class="fboxCol flex1 font28 con font-ell2 lh38">{{ innerData.dynamicForwardContent }}</view>
					</view>
				</template>
				<view class="tag-groups fboxWrap font26 mt32" v-if="innerData.groupName || innerData.topicTitle || innerData.listTopicVO">
					<template v-if="innerData.listTopicVO && innerData.listTopicVO.length">
						<view class="tag tag-topic fboxRow Ycenter " v-for="(item, index) in innerData.listTopicVO" :key="index" @click="goTopic(item.topicId)">
							<text class="bwfont bw-a-zu3303"></text>
							{{ item.topicTitle }}
						</view>
					</template>
					<view class="tag tag-topic fboxRow Ycenter " v-if="innerData.topicTitle" @click="goPage('topicDetails')">
						<text class="bwfont bw-a-zu3303"></text>
						{{ innerData.topicTitle }}
					</view>
					<view class="tag tag-group fboxRow Ycenter" v-if="innerData.groupName" @click="goPage('circle')">
						<text class="bwfont bw-a-zu3306"></text>
						{{ innerData.groupName }}
					</view>
				</view>
			</view>
			<view class="item-ft font-w300 mt20 fboxRow Ycenter font26">
				<view class="flex1 fboxRow Ycenter" @tap.stop="goPage('dynamicDetails')">
					<view class="time">{{ dateFormat(innerData.gmtCreate) }}</view>
				</view>
				<view class="fboxRow Ycenter ml24">
					<text class="bwfont bw-Vector2"></text>
					<text class="time">{{ innerData.browseCount || '浏览' }}</text>
				</view>
				<view class="fboxRow Ycenter ml24" @tap.stop="goPage('dynamicDetails')">
					<text class="bwfont bw-a-zu3304"></text>
					<text class="time">{{ innerData.commentNum || '评论' }}</text>
				</view>
				<view class="fboxRow Ycenter ml24" @click="likeTap">
					<text  class="bwfont bw-Vector3" :style="{color: _innerData.isLike ? '#E8CDA7' : ''}" ></text>
					<text class="time">{{ _innerData.likeNum || '点赞' }}</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
	</view>
</template>

<script>
import { dynamicLike, dynamicUnlike } from '@/api/card.js';
import { attentionAdd, attentionDel } from '@/api/mine.js';
import { dateFormat, whiteUrlCon } from '@/static/js/common.js';
import {base64encode, utf8to16} from '@/static/js/Base64.js'
export default {
	props: {
		innerData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: 'dynamic' // 默认动态dynamic || topicDetails 话题详情
		},
		isMine: {
			type: Boolean,
			default: false
		},
		space:{
			type: String,
			default: 'space' // space | line
		}
	},
	computed: {
		_innerData: {
			get() {
				if (this.innerData.pictures.length == 1 && this.innerData.pictureType != 3) {
					const _this = this;
					const bw = ''
					const pic = ''
					uni.getImageInfo({
						src: this.innerData.pictures[0],
						success: res => {
							// 300 : 200
							if (res.width <= res.height) {
								const height = 180;
								let width = res.width * (height / res.height);
								width = width < 100 ? 100 : width;
								this.w = width + 'px'
								this.h = height + 'px'
								this.imgStyle = `width:${width}px;height:${height}px`
								this.$set(this.innerData, 'height', height + 'px');
								this.$set(this.innerData, 'width', width + 'px');
							} else {
								this.w = '100%'
								this.h = '400rpx'
								this.imgStyle = `width:100%;height:400rpx`
							}
						},
						fail: () => {
						}
					});
				}
				if (this.innerData.pictureType == 3) {
					const _this = this;
					uni.getImageInfo({
						src: this.innerData.coverURL,
						success: res => {
							// 300 : 200
							if (res.width <= res.height) {
								const height = 180;
								let width = res.width * (height / res.height);
								width = width < 100 ? 100 : width;
								this.$set(this.innerData, 'height', height + 'px');
								this.$set(this.innerData, 'width', width +'px');
								this.imgStyle = `width:${width}px;height:${height}px`
							} else {
								let width = (res.height / 400)*res.width;
								width = width > 340 ? 340 : width
								this.imgStyle = `width:${width}px;height:400rpx`
								// const rb = res.width / 320; // 计算屏幕宽度跟图片宽度的比例
								// const height = parseInt(res.height / rb); // 高度除以比例等于缩放后的图片高度
								// let width = res.width * (height / res.height); //
								// width = width > 320 ? 320 : width;
								// this.$set(this.innerData, 'height', height + 'px');
								// this.$set(this.innerData, 'width', width + 'px');
							}
						}
					});
				}
				return this.innerData;
			},
			set(val) {
				this.$emit('update:innerData', val);
			}
		}
	},
	data() {
		return {
			dateFormat,
			whiteUrlCon,
			imgStyle: ''
		};
	},
	methods: {
		// 跳转主页
		goMyDdHome() {
			// let pages = getCurrentPages();
			// let currentRoute = pages[pages.length - 1].route;
			// console.log(currentRoute);
			// if (currentRoute == 'pagesMine/mydd' || currentRoute == 'pages/card/cardDetail') {
			// 	return;
			// }
			// 个人主页3.4.0
			// this.$pageTo('/mydd?memberId=' + this.innerData.memberId);
			// 动态详情3.5.0
			this.$pageTo('/CardDetail?id=' + this.innerData.memberId);
		},
		// 图片预览
		picPreview(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		// 跳转话题
		goTopic(id){
			this.$pageTo('/circle/topicDetails?id=' + id);
		},
		// 跳转页面
		goPage(str) {
			if (str == 'circle' && this.type != 'circle') {
				// 圈子
				this.$pageTo('/circle?id=' + this.innerData.groupId);
			}
			if (str == 'topicDetails' && this.type != 'topicDetails') {
				// 话题
				this.$pageTo('/circle/topicDetails?id=' + this.innerData.topicId);
			}
			if (str == 'dynamicDetails') {
				// 动态
				if (this.innerData.isHotText) {
					// 热文动态单独处理
					// #ifdef H5
					if(this.innerData.originalUrl){
						window.location.href = this.innerData.originalUrl
					}else {
						window.location.href = this.innerData.hotUrl
					}
					// #endif
					// #ifdef MP
					// this.$pageTo('/about/guidePage')
					console.log('originalUrl',this.innerData.originalUrl)
					const originalUrl = this.innerData.originalUrl
					if(originalUrl){
						// if(originalUrl.includes('/hotArticle/detail')){
						// 	const index = originalUrl.indexOf("/h5/#/")
						// 	const hotUrl = originalUrl.substring(index+5, originalUrl.length);
						// 	console.log(hotUrl)
						// 	this.$pageTo(hotUrl);
						// }else{
						// 	uni.navigateTo({
						// 		url: '/web-view?url=' + base64encode(originalUrl),
						// 		// url: '/web-view?url=' + encodeURI(this.innerData.hotUrl),
						// 		success(res) {
						// 			// 打开成功的回调函数
						// 			console.log('成功啦=====');
						// 		},
						// 		fail(res) {
						// 			// 打开失败的回调函数
						// 		}
						// 	});
						// }
						uni.navigateTo({
							url: '/web-view?url=' + encodeURIComponent(encodeURI(this.innerData.originalUrl)),
							// url: '/web-view?url=' + encodeURI(this.innerData.originalUrl),
							success(res) {
								// 打开成功的回调函数
								console.log('成功啦=====');
							},
							fail(res) {
								// 打开失败的回调函数
							}
						});
					}else{
						uni.navigateTo({
							// url: '/web-view?url=' + base64encode(this.innerData.originalUrl),
							url: '/web-view?url=' + base64encode(utf8to16(this.innerData.hotUrl)),
							success(res) {
								// 打开成功的回调函数
								console.log('成功啦=====');
							},
							fail(res) {
								// 打开失败的回调函数
							}
						});
					}
					// #endif
				} else {
					this.$pageTo('/dynamicDetails?id=' + this.innerData.dynamicId);
				}
			}
			if (str == 'dynamicVideo') {
				// 视频
				this.$pageTo('/dynamicVideo?id=' + this.innerData.dynamicId);
			}
		},
		// 点赞
		likeTap() {
			const bw_params = JSON.parse(uni.getStorageSync('bw_params') || '{}');
			const bw_user_temp = JSON.parse(uni.getStorageSync('bw_user_temp') || '{}');
			if (bw_params && bw_params.access_token && bw_user_temp && bw_user_temp.memberId) {
				const api = this._innerData.isLike ? dynamicUnlike : dynamicLike;
				api({
					busMemberId: this.innerData.memberId,
					businessId: this.innerData.dynamicId,
					memberId: bw_user_temp.memberId
				}).then(res => {
					this._innerData.likeNum = this._innerData.isLike ? this._innerData.likeNum - 1 : this._innerData.likeNum + 1;
					this._innerData.isLike = !this._innerData.isLike;
				});
			} else {
				this.$emit('login');
			}
		},
		// 更多操作
		moreMenu() {
			const text = this._innerData.isFollow ? '取消关注' : '关注';
			uni.showActionSheet({
				itemList: [text],
				itemColor: '#ACB4C7',
				class: 'actionSheetMenu',
				success: res => {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					const bw_params = JSON.parse(uni.getStorageSync('bw_params') || '{}');
					if (bw_params && bw_params.access_token) {
						if (this._innerData.isFollow) {
							attentionDel({
								memberIdList: [this._innerData.memberId]
							}).then(res => {
								if (res.data) {
									this._innerData.isFollow = false;
									this.$emit('updateAttention', false);
								} else {
									uni.showToast({
										title: res.message
									});
								}
							});
						} else {
							attentionAdd({
								othersId: this._innerData.memberId
							}).then(res => {
								if (res.data) {
									this._innerData.isFollow = true;
									this.$emit('updateAttention', true);
								} else {
									uni.showToast({
										title: res.message
									});
								}
							});
						}
					} else {
						this.$emit('login');
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.space-line{position: relative; margin: 0 10rpx;}
.space-line::before{content: '';position: absolute;left: 0;top: 50%;margin: -10rpx 0 0; width: 1rpx;height: 20rpx;background-color: #D0D3DB;}
.dynamic-item .inner {
	// margin-bottom: 40rpx;
	padding: 20rpx 20rpx 28rpx;
	background-color: var(--viewBgColor);
	border-radius: 12rpx;
}

.dynamic-item .item-hd .avatar {
	margin-right: 16rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	// background-color: #f9f9f9;
}
.moreText {
	color: var();
}
.dynamic-item .item-hd .icon {
	width: 6rpx;
	height: 26rpx;
}
.dynamic-item .item-hd .bwfont {
	font-size: 28rpx;
}
.dynamic-item .con {
	line-height: 44rpx;
	font-weight: 300;
	color: var(--contentFontDarkColor);
}

.tag-groups {
}
.name {
	color: var(--titleFontColor);
}
.job{margin-top: 4rpx;width: 530rpx; line-height: 34rpx; color:var(--contentFontLightColor);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.tag-groups .tag {
	padding: 0 12rpx;
	height: 48rpx;
	border-radius: 24rpx;
	// border-radius: 8rpx;
	background: #F3E2D8;
	color: #CE763F;
}

.tag-groups .tag .bwfont {
	margin-right: 8rpx;
}

.tag-groups .tag {
	margin-right: 16rpx;
}

.tag-groups .tag-topic {
	margin-bottom: 16rpx;
	background: #DDEFFA;
	color: #3A7FAC;
}

.dynamic-item .max-video {
	position: relative;
	// width: 100%;
	max-height: 400rpx;
	border-radius: 12rpx;
	overflow: hidden;
}
.video-inner{
	border-radius: 12rpx;
	width: 100%;
	max-height: 400rpx;
	overflow: hidden;}
.dynamic-item .icon-play {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -48rpx 0 0 -48rpx;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
}
.dynamic-item .max-pic {
	// width: 220rpx;
	// height: 276rpx;
	border-radius: 8rpx;
}
.dynamic-item .max-pic100 {
	width: 100%;
	border-radius: 8rpx;
}

.dynamic-item .pic-list {
	margin-left: -12rpx;
}

.dynamic-item .pic-list .pic {
	margin: 10rpx 0 0 0;
	padding-left: 12rpx;
	width: 33.33%;
	height: 196rpx;
	border-radius: 12rpx;
}
.dynamic-item .pic-list .pic .img {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.dynamic-item .icon {
	margin-right: 6rpx;
	width: 34rpx;
	height: 28rpx;
}

.dynamicForward {
	margin-top: 40rpx;
	padding: 24rpx 26rpx;
	height: 152rpx;
	border-radius: 12rpx;
}

.dynamicForward .pic {
	margin-right: 18rpx;
	width: 104rpx;
	height: 104rpx;
	border-radius: 12rpx;
	background-color: #2c2f37;
}

.dynamicForward .con { max-height: 132rpx; overflow: hidden;}
.item-ft{margin-top: 26rpx;height: 40rpx;}
.item-ft .bwfont { margin-right: 8rpx; font-size: 24rpx; color: var(--contentFontFourColor); }
.time { color: var(--contentFontFourColor); }
.bw-dian{color: var(--contentFontFourColor);}
.state {
	margin-left: 16rpx;
	width: 120rpx;
	height: 40rpx;
	background: var(--pureButtonBackOneColor);
	color: var(--contourButtonTextColor);
	border-radius: 8rpx
}
.line {
	width: 100%;
	background: var(--controllerBgColor);
}

.dynamic-item-space .line {
	height: 24rpx;
}
.dynamic-item-line .inner{padding: 0;}
.dynamic-item-line .line {height: 1rpx;margin: 40rpx 0}
</style>
